<template>
  <div>
    <el-row>
      <el-col :span="16">
        <el-tag>
          用户信息
        </el-tag>
        <el-table :data="tableData" style="width: 90%" :row-class-name="tableRowClassName" border>
          <el-table-column prop="id" label="ID" width="180"/>
          <el-table-column prop="name" label="姓名" width="180"/>
          <el-table-column prop="password" label="密码"/>
          <el-table-column prop="token" label="TOKEN"/>
        </el-table>
      </el-col>
      <el-col :span="8">
        <el-tag>
          用户登入
        </el-tag>
        <br/>
        <br/>
        <br/>
        <el-input style="width: 90%" class="-input__inner" v-model="username" type="text"
                  placeholder="Please input name"/>
        <el-input style="width: 90%" class="input" v-model="password" type="text" placeholder="Please input password"/>
        <el-button class="button" type="primary" @click="login">登录</el-button>
      </el-col>
    </el-row>
    <el-divider border-style="dashed"/>
    <el-row>

      <el-col :span="12">
        <el-tag>
          用户数据权限功能
        </el-tag>
        <el-table :data="dataTree" style="width: 90%" @row-click="rowClickHandle" border>
          <el-table-column width="50" align="center">
            <template v-slot="scope">
              <el-radio :label="scope.row.id" v-model="radioId">{{ '' }}</el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="url" label="URL"/>
          <el-table-column prop="desct" label="功能描述"/>
        </el-table>
      </el-col>
      <el-col :span="12">
        <el-tag>
          详细配置
        </el-tag>

        <el-table :data="selection" style="width: 90%" border>
          <el-table-column prop="name" label="字段"/>
          <el-table-column prop="desct" label="功能描述"/>
          <el-table-column prop="conditionTxt" label="条件"/>

          <el-table-column align="right" label="操作">
            <template v-slot="scope">
              <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">Edit
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button class="button" type="primary" @click="saveCol">保存</el-button>
      </el-col>

    </el-row>
    <el-divider border-style="dashed"/>
    <el-row>
      <el-button
          icon="el-icon-search"
          size="mini"
          type="primary"
          @click="getGood"
      >搜索
      </el-button
      >


      <el-table :data="goodData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%" border
                :border-style="{borderColor:'#01e3ed'}">
        <el-table-column prop="sku" label="商品sku"/>
        <el-table-column prop="name" label="商品名称"/>
        <el-table-column prop="goodDesc" label="商品描述"/>
        <el-table-column prop="rawPrice" label="原价"/>
        <el-table-column prop="vendorName" label="供应商名称"/>
        <el-table-column prop="imgUrl" label="图片路径"/>
        <el-table-column prop="goodsType" label="服务类型"/>
        <el-table-column prop="isEnable" label="是否启用"/>
      </el-table>
      <div class="block-box">
        <el-pagination align='center'
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[1,5,10,20]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="goodData.length">
        </el-pagination>
      </div>

    </el-row>
  </div>
</template>

<script>
import {get, post} from '@/myajax'
import {setStore, getStore} from '@/store'
import {ElMessage} from "element-plus";

export default {
  name: 'UserComponent',
  props: {
    msg: String
  },
  data() {
    return {
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 5, // 每页的数据条数
      tableData: [],
      goodData: [],
      dataTree: [],
      colData: [],
      username: '',
      password: '',
      radioId: null,
      selection: [],
      multipleSelection: {}
    }
  },
  mounted() {
    this.getUserList();
    this.getGood();
  },
  methods: {
    //标红table指定行
    tableRowClassName({row}) {

      //判断条件（quantityStock ，warningLimit ，quantityStock 列表字段信息）
      if (row.token === getStore()) {
        // 后面的css样式
        return 'warning-row';

      } else {
        // 后面的css样式
        return 'success-row';

      }
    },
    // 表格分页---前端分页
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
    },

    login() {
      post("/user/login", {
        username: this.username,
        password: this.password
      }).then(res => {
        if (res.data.code === 200) {
          console.log(res.data.result)
          setStore(res.data.result)
          console.log(getStore());
          this.getUserList()
          ElMessage({
            message: "登入成功",
            type: 'success',
          })
          this.getDataTree();


        } else {
          ElMessage({
            message: res.data.msg,
            type: 'warning',
          })
        }
      })
    },
    getUserList() {
      get('/user/getAllUser').then(res => {
        this.tableData = res.data.result
      })
    },
    getGood() {
      get('/test/good').then(res => {
        this.goodData = res.data.result
        console.log(this.goodData)
      })
    },
    getDataTree() {
      get('/data/getNowUserTree').then(res => {
        this.dataTree = res.data.result
        this.selection = [];

        console.log(this.dataTree)
      })
    },
    rowClickHandle(row) {
      // row是选中行的数据
      this.radioId = row.id;
      this.selection = row.children;
    },
    handleEdit(index, row) {

      this.$prompt('请输入条件', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({value}) => {
        row.conditionTxt = value;
        this.$message({
          type: 'success',
          message: '编辑成功: ' + value
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消编辑'
        });
      });
    },
    saveCol() {
      post('/data/saveOrUpdate', {list: this.selection}).then(res => {
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: '保存成功'
          });
        } else {
          this.$message({
            type: 'error',
            message: res.data.msg
          });
        }
      })
    }
  }
}

</script>


<style scoped>
/deep/ .el-table .success-row {
  color: rgb(27, 33, 27) !important;
}

/deep/ .el-table .warning-row {
  color: #f51f1f !important;
}


</style>